@if (config && config.flags && flagValues) {
  <div class="modal-body">
    <div class="row">
      <div class="col-12">
        <p class="lead text-center mb-1">
          Flags selection: <strong>{{ config.name }}</strong>
        </p>
      </div>
      <div class="col-5">
        <p>
          Total value: <strong>{{ value }}</strong>
        </p>
      </div>
      <div class="col-7">
        <p class="text-right">
          Wondering how bits work? Check
          <a href="http://www.azerothcore.org/wiki/Bit-and_bytes-tutorial" target="_blank">the documentation</a>.
        </p>
      </div>
    </div>
    <div class="table-wrapper">
      <table class="table table-striped table-bordered table-sm" id="flags-table">
        <thead>
          <tr>
            <th></th>
            <th>Bit</th>
            <th>Value (2^Bit)</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
          @for (flag of config.flags; track flag) {
            <tr>
              <td>
                <ui-switch [checked]="flagValues[flag.bit]" (change)="toggleBit(flag.bit)" [id]="'switch-bit-' + flag.bit"></ui-switch>
              </td>
              <td class="text-center">{{ flag.bit }}</td>
              <td class="text-center">{{ flagValues[flag.bit] ? '+' + pow(2, flag.bit) : '' }}</td>
              <td>{{ flag.name }}</td>
            </tr>
          }
        </tbody>
      </table>
    </div>
  </div>
}

<div class="modal-footer">
  <button type="button" class="btn btn-danger" id="modal-cancel-btn" (click)="onCancel()" [translate]="'CANCEL'"></button>
  <button type="button" class="btn btn-success" id="modal-select-btn" (click)="onSave()" [translate]="'SELECT'"></button>
</div>
